<template>
  <div class="culture-management">
    <!-- 顶部统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon culture">
          <i class="el-icon-collection"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalCount || 0 }}</div>
          <div class="stat-label">文化内容总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon published">
          <i class="el-icon-check"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.publishedCount || 0 }}</div>
          <div class="stat-label">已发布</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon draft">
          <i class="el-icon-edit"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.draftCount || 0 }}</div>
          <div class="stat-label">草稿</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon views">
          <i class="el-icon-view"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalViews || 0 }}</div>
          <div class="stat-label">总浏览量</div>
        </div>
      </div>
    </div>

    <!-- 搜索和操作栏 -->
    <div class="toolbar">
      <div class="search-section">
        <el-input
          v-model="searchForm.title"
          placeholder="搜索文化内容标题"
          prefix-icon="el-icon-search"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-select v-model="searchForm.category" placeholder="选择分类" clearable>
          <el-option label="历史文化" :value="1" />
          <el-option label="技法介绍" :value="2" />
          <el-option label="作品欣赏" :value="3" />
          <el-option label="文化内涵" :value="4" />
        </el-select>
        <el-select v-model="searchForm.status" placeholder="发布状态" clearable>
          <el-option label="已发布" :value="1" />
          <el-option label="草稿" :value="0" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </div>
      <div class="action-section">
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增文化内容</el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          :disabled="selectedItems.length === 0"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 文化内容列表 -->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="cultureList"
        @selection-change="handleSelectionChange"
        stripe
        border
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column label="封面图" width="100" align="center">
          <template #default="{ row }">
            <el-image
              :src="getImageUrl(row.coverImage) || '/images/culture/default.png'"
              :preview-src-list="[getImageUrl(row.coverImage)]"
              fit="cover"
              class="cover-image"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="category" label="分类" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getCategoryType(row.category)">{{ getCategoryLabel(row.category) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" align="center" />
        <el-table-column prop="viewCount" label="浏览量" width="100" align="center">
          <template #default="{ row }">
            <span class="view-count">{{ row.viewCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="likeCount" label="点赞数" width="100" align="center">
          <template #default="{ row }">
            <span class="like-count">{{ row.likeCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="发布状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="isRecommend" label="推荐" width="80" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.isRecommend" type="success" size="small">推荐</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
        <el-table-column label="操作" width="220" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button size="small" type="primary" @click="handleView(row)">查看</el-button>
              <el-button size="small" type="warning" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <div class="pagination-info">
        共 {{ pagination.total }} 条数据
      </div>
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        :pager-count="5"
        :disabled="loading"
        layout="sizes, prev, pager, next"
        class="custom-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input v-model="formData.title" placeholder="请输入文化内容标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类" prop="category">
              <el-select v-model="formData.category" placeholder="选择分类">
                <el-option label="历史文化" :value="1" />
                <el-option label="技法介绍" :value="2" />
                <el-option label="作品欣赏" :value="3" />
                <el-option label="文化内涵" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者" prop="author">
              <el-input v-model="formData.author" placeholder="请输入作者" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="封面图">
              <div class="upload-container">
                <el-upload
                  class="cover-uploader"
                  action="#"
                  :http-request="handleImageUpload"
                  :show-file-list="false"
                  :before-upload="beforeImageUpload"
                  accept="image/*"
                >
                  <img v-if="formData.coverImage" :src="getImageUrl(formData.coverImage)" class="cover-image" />
                  <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="upload-tip">
                  支持 jpg、png、gif 格式，文件大小不超过 10MB
                </div>
                <div v-if="formData.coverImage" class="image-actions">
                  <el-button size="small" type="danger" @click="handleRemoveImage">删除图片</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="简介">
              <el-input
                v-model="formData.summary"
                type="textarea"
                :rows="3"
                placeholder="请输入内容简介"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容">
              <el-input
                v-model="formData.content"
                type="textarea"
                :rows="6"
                placeholder="请输入详细内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布状态">
              <el-radio-group v-model="formData.status">
                <el-radio :label="0">草稿</el-radio>
                <el-radio :label="1">发布</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设为推荐">
              <el-switch
                v-model="formData.isRecommend"
                :active-value="1"
                :inactive-value="0"
                active-text="推荐"
                inactive-text="不推荐"
                active-color="#13ce66"
              />
              <div class="form-tip">开启后将在前端首页精选推荐中展示</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看文化内容"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="view-content">
        <!-- 基本信息 -->
        <div class="section">
          <h3 class="section-title">基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">标题：</span>
              <span class="value">{{ viewData.title }}</span>
            </div>
            <div class="info-item">
              <span class="label">分类：</span>
              <el-tag :type="getCategoryType(viewData.category)">
                {{ getCategoryLabel(viewData.category) }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="label">作者：</span>
              <span class="value">{{ viewData.author || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">发布状态：</span>
              <el-tag :type="viewData.status === 1 ? 'success' : 'info'">
                {{ viewData.status === 1 ? '已发布' : '草稿' }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="label">推荐状态：</span>
              <el-tag :type="viewData.isRecommend === 1 ? 'success' : ''">
                {{ viewData.isRecommend === 1 ? '已推荐' : '未推荐' }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 封面图 -->
        <div class="section" v-if="viewData.coverImage">
          <h3 class="section-title">封面图</h3>
          <div class="cover-preview">
            <el-image
              :src="getImageUrl(viewData.coverImage)"
              fit="cover"
              class="view-cover-image"
            />
          </div>
        </div>

        <!-- 内容信息 -->
        <div class="section">
          <h3 class="section-title">内容信息</h3>
          <div class="info-item full-width" v-if="viewData.summary">
            <span class="label">简介：</span>
            <div class="value content-text">{{ viewData.summary }}</div>
          </div>
          <div class="info-item full-width" v-if="viewData.content">
            <span class="label">详细内容：</span>
            <div class="value content-text">{{ viewData.content }}</div>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="section">
          <h3 class="section-title">统计信息</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <span class="stat-label">浏览量</span>
              <span class="stat-value">{{ viewData.viewCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">点赞数</span>
              <span class="stat-value">{{ viewData.likeCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">收藏数</span>
              <span class="stat-value">{{ viewData.favoriteCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">分享数</span>
              <span class="stat-value">{{ viewData.shareCount || 0 }}</span>
            </div>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="section">
          <h3 class="section-title">时间信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">创建时间：</span>
              <span class="value">{{ viewData.createTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">更新时间：</span>
              <span class="value">{{ viewData.updateTime }}</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {
  getCulturePage,
  getCultureStats,
  deleteCulture,
  batchDeleteCultures,
  batchUpdateCultureStatus,
  createCulture,
  updateCulture,
  updateCultureStatus,
  getCultureDetail,
  CULTURE_CATEGORIES,
  CULTURE_STATUS
} from '@/api/culture'
import { uploadImage, deleteImage } from '@/api/upload'
import { getImageUrl, handleImageError } from '@/utils/imageUtils'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const viewDialogVisible = ref(false)
const viewData = ref({})
const cultureList = ref([])
const selectedItems = ref([])

// 统计数据
const stats = reactive({
  totalCount: 0,
  publishedCount: 0,
  draftCount: 0,
  totalViews: 0
})

// 搜索表单
const searchForm = reactive({
  title: '',
  category: null,
  status: null
})

// 分页数据
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 表单数据
const formData = reactive({
  id: null,
  title: '',
  category: null,
  author: '',
  coverImage: '',
  summary: '',
  content: '',
  status: 1,
  isRecommend: 0
})

// 表单验证规则
const formRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  category: [{ required: true, message: '请选择分类', trigger: 'change' }],
  author: [{ required: true, message: '请输入作者', trigger: 'blur' }]
}

// 获取分类标签
const getCategoryLabel = (category) => {
  const labels = {
    1: '历史文化',
    2: '技法介绍',
    3: '作品欣赏',
    4: '文化内涵'
  }
  return labels[category] || category
}

// 获取分类类型
const getCategoryType = (category) => {
  const types = {
    1: 'success',
    2: 'primary',
    3: 'warning',
    4: 'info'
  }
  return types[category] || ''
}

// 加载文化内容列表
const loadCultureList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      ...searchForm
    }
    const response = await getCulturePage(params)
    if (response.code === 200) {
      cultureList.value = response.data.records || []
      pagination.total = response.data.total || 0
    }

    // 加载统计信息
    await loadStats()
  } catch (error) {
    console.error('加载文化内容列表失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 加载统计信息
const loadStats = async () => {
  try {
    const response = await getCultureStats()
    if (response.code === 200) {
      Object.assign(stats, response.data)
    }
  } catch (error) {
    console.error('加载统计信息失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  loadCultureList()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    title: '',
    category: null,
    status: null
  })
  pagination.page = 1
  loadCultureList()
}

// 新建
const handleCreate = () => {
  Object.assign(formData, {
    id: null,
    title: '',
    category: null,
    author: '',
    coverImage: '',
    summary: '',
    content: '',
    status: 1,
    isRecommend: 0
  })
  dialogTitle.value = '新增文化内容'
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row) => {
  Object.assign(formData, { ...row })
  dialogTitle.value = '编辑文化内容'
  dialogVisible.value = true
}

// 查看
const handleView = async (row) => {
  try {
    const response = await getCultureDetail(row.id)
    if (response.code === 200) {
      viewData.value = response.data
      viewDialogVisible.value = true
    } else {
      ElMessage.error('获取详情失败')
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    ElMessage.error('获取详情失败')
  }
}

// 删除
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定删除文化内容"${row.title}"吗？\n删除后将无法恢复，请谨慎操作！`,
      '确认删除',
      {
        type: 'warning',
        dangerouslyUseHTMLString: false,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        confirmButtonClass: 'el-button--danger'
      }
    )

    loading.value = true
    const response = await deleteCulture(row.id)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      
      // 如果当前页面删除后没有数据，且不是第一页，则回到上一页
      const currentPageDataCount = cultureList.value.length
      if (currentPageDataCount === 1 && pagination.page > 1) {
        pagination.page -= 1
      }
      
      await loadCultureList()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      const errorMessage = error?.response?.data?.message || error?.message || '删除失败，请稍后重试'
      ElMessage.error(errorMessage)
    }
  } finally {
    loading.value = false
  }
}

// 批量删除
const handleBatchDelete = async () => {
  const selectedCount = selectedItems.value.length
  if (selectedCount === 0) {
    ElMessage.warning('请先选择要删除的文化内容')
    return
  }

  try {
    const selectedTitles = selectedItems.value.slice(0, 3).map(item => item.title).join('、')
    const titleDisplay = selectedCount > 3 ? `${selectedTitles} 等` : selectedTitles
    
    await ElMessageBox.confirm(
      `确定删除选中的 ${selectedCount} 项文化内容吗？\n\n包括：${titleDisplay}\n\n删除后将无法恢复，请谨慎操作！`,
      '批量删除确认',
      {
        type: 'warning',
        dangerouslyUseHTMLString: false,
        confirmButtonText: `确认删除 ${selectedCount} 项`,
        cancelButtonText: '取消',
        confirmButtonClass: 'el-button--danger'
      }
    )

    loading.value = true
    const ids = selectedItems.value.map(item => item.id)
    const response = await batchDeleteCultures(ids)

    if (response.code === 200) {
      ElMessage.success(`批量删除成功，共删除 ${selectedCount} 项文化内容`)
      selectedItems.value = []
      
      // 计算删除后页面调整
      const totalDeletedCount = selectedCount
      const currentPageDataCount = cultureList.value.length
      const remainingOnCurrentPage = currentPageDataCount - totalDeletedCount
      
      // 如果当前页面删除后没有数据，且不是第一页，则回到合适的页面
      if (remainingOnCurrentPage <= 0 && pagination.page > 1) {
        const totalRemainingItems = pagination.total - totalDeletedCount
        const maxPage = Math.ceil(totalRemainingItems / pagination.size)
        pagination.page = Math.min(pagination.page, Math.max(1, maxPage))
      }
      
      await loadCultureList()
    } else {
      ElMessage.error(response.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      const errorMessage = error?.response?.data?.message || error?.message || '批量删除失败，请稍后重试'
      ElMessage.error(errorMessage)
    }
  } finally {
    loading.value = false
  }
}

// 状态变更
const handleStatusChange = async (row) => {
  try {
    const response = await updateCultureStatus(row.id, row.status)
    if (response.code === 200) {
      ElMessage.success(`${row.status === 1 ? '发布' : '取消发布'}成功`)
      loadCultureList()
    } else {
      throw new Error(response.message || '状态更新失败')
    }
  } catch (error) {
    console.error('状态更新失败:', error)
    ElMessage.error(error.message || '状态更新失败')
    // 回滚状态
    row.status = row.status === 1 ? 0 : 1
  }
}

// 选择变更
const handleSelectionChange = (selection) => {
  selectedItems.value = selection
}

// 上传前验证
const beforeImageUpload = (file) => {
  const isJPG = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].includes(file.type)
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传 JPG、PNG、GIF 格式的图片!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!')
    return false
  }
  return true
}

// 自定义上传
const handleImageUpload = async (options) => {
  const { file } = options
  
  try {
    const response = await uploadImage(file)
    if (response.code === 200) {
      formData.coverImage = response.data.url
      ElMessage.success('图片上传成功')
    } else {
      ElMessage.error(response.message || '上传失败')
    }
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败')
  }
}

// 删除图片
const handleRemoveImage = async () => {
  if (formData.coverImage) {
    try {
      await deleteImage(formData.coverImage)
      formData.coverImage = ''
      ElMessage.success('图片删除成功')
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.warning('图片删除失败，但已从表单中移除')
      formData.coverImage = ''
    }
  }
}


// 提交表单
const handleSubmit = async () => {
  try {
    submitting.value = true

    const isEdit = !!formData.id
    const response = isEdit
      ? await updateCulture(formData.id, formData)
      : await createCulture(formData)

    if (response.code === 200) {
      ElMessage.success(`${isEdit ? '更新' : '创建'}成功`)
      dialogVisible.value = false
      loadCultureList()
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败')
  } finally {
    submitting.value = false
  }
}

// 分页处理方法
const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  loadCultureList()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  loadCultureList()
}

// 初始化
onMounted(() => {
  loadCultureList()
})
</script>

<style scoped>
.culture-management {
  padding: 20px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: center;
  border: 1px solid #e4e7ed;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  margin-right: 16px;
}

.stat-icon.culture { background-color: #409eff; }
.stat-icon.published { background-color: #67c23a; }
.stat-icon.draft { background-color: #e6a23c; }
.stat-icon.views { background-color: #909399; }

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #606266;
}

.toolbar {
  background: white;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid #e4e7ed;
}

.search-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-section .el-input {
  width: 200px;
}

.search-section .el-select {
  width: 120px;
}

.action-section {
  display: flex;
  gap: 8px;
}

.table-container {
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}

.cover-image {
  width: 60px;
  height: 40px;
  border-radius: 4px;
}

.view-count, .like-count {
  color: #606266;
  font-weight: normal;
}

/* 分页容器 */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

.custom-pagination {
  justify-content: flex-end;
}

/* 响应式分页 */
@media (max-width: 768px) {
  .pagination-wrapper {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  .pagination-info {
    text-align: center;
    font-size: 13px;
  }
  
  .custom-pagination {
    justify-content: center;
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.action-buttons .el-button {
  margin: 0;
  min-width: 56px;
}

/* 文件上传样式 */
.upload-container {
  width: 100%;
  text-align: left;
}

.cover-uploader {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.cover-uploader:hover {
  border-color: #409eff;
}

.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 118px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

.cover-image {
  width: 178px;
  height: 118px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}

.image-actions {
  margin-top: 8px;
}

.form-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}

.dialog-footer {
  text-align: center;
}

/* 查看弹窗样式 */
.view-content {
  max-height: 600px;
  overflow-y: auto;
}

.section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 16px 0;
  padding-left: 8px;
  border-left: 4px solid #409eff;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 8px;
}

.label {
  color: #606266;
  font-weight: 500;
  min-width: 80px;
  flex-shrink: 0;
}

.value {
  color: #303133;
  word-wrap: break-word;
}

.content-text {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  line-height: 1.6;
  white-space: pre-wrap;
  border: 1px solid #e4e7ed;
}

.cover-preview {
  display: flex;
  justify-content: center;
}

.view-cover-image {
  width: 300px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-item {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e4e7ed;
}

.stat-label {
  display: block;
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  color: #409eff;
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .view-cover-image {
    width: 250px;
    height: 167px;
  }
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-section {
    justify-content: center;
  }
  
  .action-section {
    justify-content: center;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-buttons .el-button {
    min-width: 48px;
    font-size: 12px;
  }
}
</style>